<template>
  <div class="tab-box">
    <div class="tag">
      <div
        :class="['tag-item', tabIndex === index ? 'tag-hover' : '']"
        v-for="(item, index) in data"
        :key="item.id"
        @click="handleClick(index)"
      >
        <el-image style="width: 32px; height: 32px" :src="item.url" />
        <span class="tag-text">{{ item.title }} </span>
      </div>
    </div>
    <div class="htag" :style="{ left: htagLeft + 'px' }" v-show="htagFlag">
      <!-- <div class="htag" :style="{left:htagLeft+'vw'}"> -->
      <div
        :class="['open-hide', hideFlag ? '' : 'isHide']"
        :style="{ right: hideRight + 'px' }"
        @click="openHide"
      ></div>
      <div class="htag-com">
        <survey v-show="tabIndex === 1" />
        <specialMap v-show="tabIndex === 2" />
        <layerCom v-show="tabIndex === 3" />
        <bookMark v-show="tabIndex === 5" />
        <search v-show="tabIndex === 6" />
      </div>
    </div>
  </div>
  <downImg :dialogVisible="dialogVisible" @change-flag="closeDiolog" v-if="dialogVisible" />
</template>

<script setup>
import { ref } from 'vue'
import layerCom from './contentTag/layer.vue'
import specialMap from './contentTag/specialMap.vue'
import survey from './contentTag/survey.vue'
import search from './contentTag/search.vue'
import bookMark from './contentTag/book.vue'
import downImg from './contentTag/downImgDialog.vue'
import { fromLonLat } from 'ol/proj'
import { useMapStoreStore } from '../../stores/index'
import {toViewEarthQuakeCenter} from '../../api/gis2d/maputils'

const store = useMapStoreStore()

const tabIndex = ref(0)
const imgTabIndex = ref(2)
const htagLeft = ref(80)
const hideRight = ref(0)
const hideFlag = ref(false)
const htagFlag = ref(false)
const dialogVisible = ref(false)

const data = [
  {
    id: 1,
    icon: 'user',
    title: '震中',
    url: '/static/icon/震中@1x.png'
  },
  {
    id: 2,
    icon: 'user',
    title: '测量',
    url: '/static/icon/测量@1x.png'
  },
  {
    id: 3,
    icon: 'user',
    title: '专题',
    url: '/static/icon/专题@1x.png'
  },
  {
    id: 4,
    icon: 'user',
    title: '图层',
    url: '/static/icon/图层@1x.png'
  },
  {
    id: 5,
    icon: 'user',
    title: '出图',
    url: '/static/icon/出图@1x.png'
  },
  {
    id: 6,
    icon: 'user',
    title: '书签',
    url: '/static/icon/书签@1x.png'
  },
  { id: 7, icon: 'user', title: '搜索', url: '/static/icon/搜索@1x.png' }
]

const handleClick = (index) => {
  if (index === 4) {
    dialogVisible.value = true
    return
  }
  if (index === 0) {
    htagFlag.value = false
   toViewEarthQuakeCenter()

    store.updateComponentsData([
      {
        id: 1011,
        title: '震区基本情况',
        type: 'text',
        data: 'zxz'
      }
    ])
  } else {
    htagFlag.value = true
  }
  tabIndex.value = index
}

const closeDiolog = () => {
  dialogVisible.value = false
}

const openHide = () => {
  if (hideFlag.value) {
    htagLeft.value = -140
    hideRight.value = -40
    hideFlag.value = false
    return
  }

  htagLeft.value = 75
  hideRight.value = 0
  hideFlag.value = true
}
onMounted(() => {
  openHide();
  // nextTick(()=>{
  //     handleClick(0)
  // })
})
</script>

<style lang="scss" scoped>
.tab-box {
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  z-index: 2;
  .tag-hover {
    background-color: #001327;
  }
  .tag {
    // width: 4.166vw;
    // min-width: 80px;
    width: 80px;
    height: 100%;
    box-sizing: border-box;
    background-color: #182e45;
    z-index: 99;
    .tag-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #b9eeff;
      // font-size: 1.0416vw;
      font-size: 20px;
      // height: 9.8181vh;
      height: 110px;
      cursor: pointer;
      .tag-icon {
        width: 40px;
        height: 40px;
        background-size: 100%;
      }
      .tag-text {
        margin-top: 10px;
      }
    }
  }
  .htag {
    // width:11.4583vw;
    width: 220px;
    height: 100%;
    position: absolute;
    left: 80px;
    top: 0;
    transition: all 1s ease;
    padding: 15px 0px;
    box-sizing: border-box;
    background-image: url(/static/assets/htag.png);
    background-size: 100% 100%;
    .htag-com {
      height: 100%;
    }
    .isHide {
      transform: rotate(180deg);
    }
    .open-hide {
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 30px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;
      background-image: url(/static/assets/hide.png);
      background-size: contain;
      background-repeat: no-repeat;
    }
    .open-hide::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 14px;
      background-image: url(/static/assets/arrow.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .htag:after {
    content: '';
    width: 99px;
    height: 34px;
    background-image: url(/static/assets/htag-bottom.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 14px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>